import { BarChartOutlined, HomeOutlined, ImportOutlined, LogoutOutlined, MenuOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Divider, Input, Popover } from 'antd';
import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { KEY_STORE_TOKEN } from './constant';
import http from './http';

const { Search } = Input

class Home extends React.Component {
    state = {
        user: {}
    }
    constructor(props) {
        super(props)
        this.handleClick = this.handleExit.bind(this)
    }
    componentDidMount() {
        this.fetch()
    }
    fetch = (params = {}) => {
        http.get("/api/user/addition/find-one")
            .then(res => {
                this.setState({
                    user: res.data
                })
            })
    }

    handleExit = () => {
        window.localStorage.removeItem(KEY_STORE_TOKEN)
        window.location.href = "/login"
    }
    handleSearch = (keyword) => {
        this.props.navigate({ pathname: "/note-search", search: "keyword=" + keyword });
    }
    handleToHome = () => {
        this.props.navigate("/");
        if (this.props.homeHook)
            this.props.homeHook()
    }

    render() {
        const butStyle = { marginLeft: '10px' }
        const content = (
            <div>
                <p> <Link to="/stats"> <Button type="primary"> <BarChartOutlined /> 统计 </Button> </Link> </p>
                <p> <Link to="/note-edit" > <Button type="primary"> <PlusOutlined /> 新建笔记 </Button> </Link> </p>
                <p> <Link to="/types"> <Button type="primary"> <MenuOutlined /> 分类管理 </Button> </Link> </p>
                <p> <Search placeholder="搜索（标题或内容）" style={{ width: 220 }} onSearch={this.handleSearch} enterButton /> </p>
            </div>
        );
        return (
            <div style={{ marginBottom: 10 }}>
                <a href="#!" onClick={this.handleToHome}>
                    <HomeOutlined style={{ fontSize: "26px" }} />
                    <b style={{ margin: "0px 8px", fontSize: "16px" }}>极简笔记 </b>
                </a>

                <Divider style={{ marginRight: 20 }} type="vertical" />
                <Link to="/import-note"> <Button type="primary"> <ImportOutlined /> 导入 </Button> </Link>
                <Popover content={content} title="更多操作">
                    <Button style={butStyle} type="primary"> <PlusCircleOutlined /> 操作</Button>
                </Popover>

                <div style={{ position: 'relative', float: 'right' }}>
                    <font style={{ color: "blue", fontWeight: "bold" }}>{this.state.user.nick || "##"}</font>
                    <Button style={butStyle} type="primary" onClick={this.handleExit}> <LogoutOutlined /> 退出 </Button>
                </div>
            </div>
        )
    }
}

// export default withRouter(Home)
// export default Home
function WithNavigate(props) {
    let navigate = useNavigate(); // 用作组件返回时才有用
    return <Home {...props} navigate={navigate} />
}
export default WithNavigate